<template>
  <div class="header-bar">
    <div class="top-wrapper">
      <img :src="config.p_logo" class="logo" />
      <div class="title-wrapper">
        <div class="title">{{ config.p_name }}</div>
        <div class="input-wrapper">
          <a-input-search
            placeholder="请输入行业名称、品名或企业名"
            enter-button="搜索"
          />
        </div>
      </div>
      <div class="data-wrapper">
        <div class="data-item">
          <div class="label">本年成交量</div>
          <div class="value">{{ sum | money }}</div>
        </div>
        <div class="data-item">
          <div class="label">本月成交量</div>
          <div class="value">50,000</div>
        </div>
      </div>
    </div>
    <div class="menu-wrapper">
      <div class="menu-list">
        <div
          class="menu-item"
          v-for="(item, index) in menus"
          :key="index"
          @click="$router.push(item.path)"
          :class="{
            active: item.path === $route.path
          }"
        >
          {{ item.title }}
        </div>
      </div>

      <img
        src="./merchant.png"
        class="merchant"
        v-if="account.applyStatus == 1"
        @click="$router.push('/user/auth/step1')"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getIndex } from "@/api";
import storage from "@/utils/storage";
export default {
  data() {
    return {
      sum: 0,
      menus: [
        {
          title: "首页",
          path: "/home"
        },
        {
          title: "求购大厅",
          path: "/orders"
        },
        {
          title: "供应市场",
          path: "/business"
        },

        {
          title: "项目信用",
          path: "/project"
        },
        {
          title: "行业资讯",
          path: "/info"
        }
      ]
    };
  },
  mounted() {
    this.indexData();
  },
  methods: {
    async indexData() {
      const res = await getIndex({});
      this.data = res.data;

      this.sum = res.data.sum_money + 160000;
      storage.setItem("HOME_INDEX", this.data);
    }
  },
  computed: {
    ...mapGetters(["account"])
  }
};
</script>

<style lang="less" scoped>
.header-bar {
  background: @white;
  .top-wrapper {
    display: flex;
    align-items: center;
    border-bottom: 1px solid @border-color;
    padding: 16px;
    .logo {
      width: 228px;
      border-radius: 8px;
    }

    .title-wrapper {
      flex: 1;
      margin-right: 30px;
      text-align: center;

      .title {
        font-size: 28px;
        font-weight: bold;
      }

      .input-wrapper {
        width: 400px;
        margin: 12px auto 0;
      }
    }

    .data-wrapper {
      .data-item {
        display: flex;
        font-size: 15px;
        padding: 4px;
        justify-content: space-between;

        .label {
          margin-right: 24px;
          color: @text-color-2;
          position: relative;

          &::after {
            position: absolute;
            top: 6px;
            bottom: 5px;
            right: -16px;
            content: "";
            background: @text-color-2;
            width: 2px;
            border-radius: 2px;
          }
        }

        .value {
          color: @red;
          font-weight: bold;
        }
      }
    }
  }

  .menu-wrapper {
    display: flex;
    align-items: center;
    padding-left: 10px;
    .menu-list {
      display: flex;
      flex: 1;

      .menu-item {
        padding: 16px 24px;
        font-weight: bold;
        font-size: 17px;
        cursor: pointer;

        &.active {
          color: @primary-color;
        }
      }
    }

    .merchant {
      width: 120px;
      margin-right: 40px;
      cursor: pointer;
    }
  }
}
</style>
